<template>
  <el-space>
    <el-switch
      v-model="switchtValue"
      class="ml-2"
      style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
      :active-value="1"
      :inactive-value="0"
      :before-change="beforeChange1"
      :loading="loading"
    />
  </el-space>
</template>

<script setup lang="ts">
  import { ref, onMounted } from 'vue'

  const props = withDefaults(
    defineProps<{
      params: any
    }>(),
    {
      params: {},
    }
  )

  const loading = ref<boolean>(false)
  const switchtValue = ref<any>(0)

  onMounted(() => {
    // console.log('props.params', props.params)
    switchtValue.value =
      props.params.data[props.params.key] === undefined ||
      props.params.data[props.params.key] === null
        ? 0
        : props.params.data[props.params.key]
  })

  const beforeChange1 = () => {
    console.log(switchtValue.value)
    switchtValue.value = switchtValue.value === 0 ? 1 : 0
    // props.params.data[props.params.key] = switchtValue.value
    const updatedData = { ...props.params.data }
    const updatedparams = { ...props.params }
    updatedData[props.params.key] = switchtValue.value === 0 ? 1 : 0

    props.params.switchChange(props.params, switchtValue.value)
    props.params.setValue(switchtValue.value)

    props.params.refreshCell()
    console.log(props.params)
    return true
    // try {
    //   loading.value = true

    //   // switchtValue.value = switchtValue.value === 0 ? 1 : 0
    //   const updatedData = { ...props.params.data }
    //   updatedData[props.params.key] = switchtValue.value === 0 ? 1 : 0

    //   const res = await request.post({ url: `/mes${props.params.url}`, data: updatedData, headersType: "application/json" })
    //   if (res.code == 200) {
    //     loading.value = false
    //     switchtValue.value = switchtValue.value === 0 ? 1 : 0
    //     props.params.data[props.params.key] = switchtValue.value
    //     console.log(props.params)
    //     props.params.refreshCell({ force: true })
    //     return true
    //   }
    //   ClMessageType.error(res.message)
    //   return false
    // } catch (error) {
    //   console.log(error)
    //   return false
    // } finally {
    //   loading.value = false
    // }
  }
</script>
